<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../src/css/default.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./style.css">
    <title>轮播图</title>
</head>

<body>

    <div class="lunBo pos_r">
        <!-- 轮播主页 -->
        <ul class="list">
            <!--
                <li class="fl_l"><img src="./images/5.jpg" alt=""></li>
                <li class="fl_l"><img src="./images/6.jpg" alt=""></li>
                <li class="fl_l"><img src="./images/7.jpg" alt=""></li>
                <li class="fl_l"><img src="./images/8.jpg" alt=""></li> 
            -->
        </ul>

        <!-- 切换按钮 -->
        <span class="left pos_a iconfont icon-fanyeanniuzuoicon"></span>
        <span class="right pos_a iconfont icon-fanyeanniuyouicon"></span>

    </div>
    <script src="./index.js"></script>

    <!-- 
        轮播图设计思想：
            1.轮播图：页面中的一个有限区域，可以让多个图片、广告等轮流展示的效果；
            2.轮播图的核心技术 是 HTML + CSS， 在这基础之上，利用 JS 实现自动播放的效果；

            布局写完之后，就需要调整 ul 的位置来展示不同的图片(position / translateX)；

            但是：
                在开发中，不建议将所有需要轮播的图片都写到 html 页面中；
                而是要利用 js 根据数据去渲染页面内容；

                1.先向后台请求数据，根据后台返回的数据渲染页面；
                2.先面向过程实现功能；
                3.将业务逻辑和功能拆分，进行各自的封装；
        
     -->
</body>

</html>